<template>
  <div class="oe-review-paper" v-loading="loading">
    <a-tooltip>
      <template slot="title">回到顶部</template>
      <a-back-top />
    </a-tooltip>
    <info-top v-if="!this.stepMode" :showExpend="false"></info-top>
    <div class="oe-paper-contianer">
      <top-tip v-if="!this.stepMode && batchTitle" :batchTitle="batchTitle" :examTitle="examTitle" :goManage="true" :batchid="batchid" :examData="examData" @getPaperIndex="getPaperIndex"></top-tip>
      <div class="oe-paper-content" v-if="paperList.length">
        <div class="oe-paper-left" style="position:relative;">
          <answer-card ref="mychild" :checkType="checkType" :structId.sync="structId" :examid="examid" :synchronizedAnswers="synchronizedAnswers" :batchid="batchid" :questionList="paperList" @getBtnAction="getBtnAction"></answer-card>
        </div>
        <div class="oe-paper-right" id="pdfDom" ref="exportPdf" v-if="paperListShow">
          <div v-if="pdfTitleShow" style="font-size: 24px;text-align: center;line-height: 60px;">{{ htmlTitle }}</div>
          <div style="text-align: center;font-size: 26px;line-height: 50px;" v-if="pdfShow">{{ form.examTitle }}</div>
          <teaTestPaper :questionData="paperList" :showAnswer="showAnswer"></teaTestPaper>
        </div>
        <canvas id="pdfImg"  width="575" height="1000" style="display:none;"></canvas>
      </div>
      <div class="paper-no-data" v-if="!paperList.length">
        <blank-tips content="该试卷没有添加题目"></blank-tips>
      </div>
    </div>
    <a-modal v-model="setTileShow" title="导出/打印标题" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" type="primary" @click="onSave">导出</a-button>
        <a-button key="submit" type="primary" @click="onPrint">打印</a-button>
      </template>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="examTitle" label="试卷标题" prop="examTitle">
          <a-input v-model="form.examTitle" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
import answerCard from '@/components/answer-card/index.vue';
import blankTips from '@/components/blank-tips/index.vue';
import teaTestPaper from '@/components/teaTestPaper/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'reviewPaper',
  mixins: [GetOperationList],
  components: {
    infoTop,
    topTip,
    answerCard,
    blankTips,
    teaTestPaper
  },
  data() {
    return {
      // 考卷份数
      examData: {
        defaultValue: '',
        paperList: 0,
        repairList: 0
      },
      loading: false,
      structId: '',
      // 试卷列表
      paperList: [],
      questionList: [],
      // 缓存考卷信息
      cacheList: [],
      mode: 'archived',
      setTileShow: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: { examTitle: '' },
      rules: {
        examTitle: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }]
      },
      pdfShow: false,
      paperListShow: true,
      pdfTitleShow: false,
      htmlTitle: '',
      showAnswer: false,
      batchTitle:'',
      examTitle:'',
      synchronizedAnswers: 1,
      checkType: 1
    };
  },
  props:{
    batchid: {
      type: String,
      default: ''
    },
    examid: {
      type: String,
      default: ''
    },
    stepMode:{
      type:Boolean,
      default:false
    }
  },
  mounted() {
    this.getReviewPaper(1);
    this.getOpeartion()
  },
  beforeDestroy(){
    this.stepMode && this.$parent.getExamData({
        defaultValue: '',
        paperList: 0,
        repairList: 0
    })
  },
  methods: {
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId',this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle
          this.batchTitle = rst.batchTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    setSavePrint() {
      this.setTileShow = true;
    },
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.savePdf();
          this.setTileShow = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    savePdf() {
      this.pdfShow = true;
      setTimeout(() => {
        window.scrollTo(0, 0);
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0;
        this.getPdf(this.form.examTitle);
        that.$refs.ruleForm.resetFields();
      }, 500);
    },
    onPrint() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.printPdf();
          this.setTileShow = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    printPdfs(e) {
      let subOutputRankPrint = document.getElementById('pdfDom');
      let newContent = subOutputRankPrint.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      window.location.reload();
      document.body.innerHTML = oldContent;
      return false;
    },
    // 隐藏输入框
    printPdf() {
      // console.log('打印');
      this.htmlTitle = this.form.examTitle;
      this.pdfTitleShow = true;
      setTimeout(() => {
        window.scrollTo(0, 0);
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0;
        let pdfDom = document.getElementById('pdfDom');
        let scoreInputDom = pdfDom.getElementsByClassName('ant-input-number');
        let scoreSpanDom = pdfDom.getElementsByClassName('Ti-pdf-input');
        for (let i = 0; i < scoreInputDom.length; i++) {
          scoreInputDom[i].style.display = 'none';
        }
        for (let key = 0; key < scoreSpanDom.length; key++) {
          scoreSpanDom[key].style.display = 'inline-block';
        }
        let inputDom = pdfDom.getElementsByClassName('ant-input');
        let spanDom = pdfDom.getElementsByClassName('Ti-li-input');
        for (let i = 0; i < inputDom.length; i++) {
          inputDom[i].style.display = 'none';
        }
        for (let key = 0; key < spanDom.length; key++) {
          spanDom[key].style.display = 'inline-block';
        }
        this.printPdfs();
      }, 100);
    },
    // 预览试卷
    getReviewPaper(flag, structId, examType) {
      this.loading = true;
      this.paperListShow = false;
      this.$http
        .post('/api/design/marking/onLineExamPreview', {
          examId: this.examid,
          structId: flag ? '' : structId,
          examType: flag ? '' : examType,
          isFist: flag ? true : false
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.synchronizedAnswers = rst.synchronizedAnswers;
            this.checkType = rst.checkType;
            if (flag) {
              if (rst.data && rst.data.length) {
                this.examData.defaultValue = rst.data[0];
              } else {
                this.examData.defaultValue = `-${rst.repairData[0]}`;
              }
              this.examData.paperList = rst.data;
              this.examData.repairList = rst.repairData;
            }
            this.stepMode && this.$parent.getExamData(this.examData)
            this.structId = this.examData.defaultValue;
            this.paperList = [];
            if (rst.list.length) {
              this.paperListShow = true;
              this.paperList = rst.list;
              this.cacheList = rst.list;
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 获取题目类型
    getType(type) {
      let questionType = [
        '单选题',
        '多选题',
        '判断题',
        '填空题',
        '填空题',
        '问答题',
        '匹配题',
        '阅读理解',
        '完形填空',
        '文件上传',
        '视听题'
      ];
      return questionType[Number(type) - 1];
    },
    // 初始化左边卡片
    initQuCard(list) {
      this.questionList = [];
      this.questionList = list;
    },
    // 点击卡片右边的操作的回调函数
    getBtnAction(val) {
      debugger
      switch (val) {
        case 'showAnswer':
          this.mode = 'result';
          this.showAnswer = true;
          break;
        case 'hideAnswer':
          this.mode = 'archived';
          this.showAnswer = false;
          break;
        case 'print':
          console.log('打印');
          break;
        default:
          break;
      }
    },
    // 获取考卷的
    getPaperIndex(val) {
      let reg = /-/g;
      let flag = reg.test(val);
      let _index = '';
      if (flag) {
        _index = val.replace(/-/, '');
        this.structId = _index;
        this.getReviewPaper('', _index, 1);
      } else {
        _index = val;
        this.structId = val;
        this.getReviewPaper('', _index, 0);
      }
      this.$refs.mychild.chrchr(this.structId);
    }
  }
};
</script>
<style scoped>
@page {
  margin-bottom: 0mm;
  margin-top: 0mm;
}
</style>
